<template>
  <div class="vab-app-main">
    <section>
      <vab-router-view />
      <div style="position: relative">
        <!-- 操作框 -->
        <div
          v-drags
          style="
            position: fixed;
            bottom: 45%;
            right: 0px;
            width: 100px;
            height: 10px;
            z-index: 999;
          "
        >
          <div class="box" @click="showflag">
            <el-button>
              <vab-icon icon="align-right" />
              {{ show }}
            </el-button>
          </div>
          <div v-if="showb" class="box_a">
            <div class="box_m" @click="customer">
              <vab-icon icon="customer-service-2-fill" />
              <div>客服</div>
            </div>
          </div>
        </div>
        <!-- 聊天框 -->
        <div v-if="Chat" style="position: relative">
          <div v-drag class="button-box" draggable="false">
            <!--  -->
            <div class="btn-bg-img" @dblclick="openBox">
              <div
                style="margin-left: 97%; padding-top: 15px"
                @click="showChat"
              >
                X
              </div>
              <div style="display: flex">
                <!-- 客服 ， 刷新 ， 留言板 -->
                <div style="width: 10%; margin-top: 10px; height: 400px">
                  <!-- 客服  -->
                  <div
                    :class="itemNum == 1 ? 'itemTab' : ''"
                    style="
                      font-size: 35px;
                      height: 20%;
                      text-align: center;
                      ine-height: 20%;
                      line-height: 2;
                    "
                    @click="item(1)"
                  >
                    <span class="el-icon-user"></span>
                  </div>
                  <!-- 刷新 -->
                  <div
                    v-if="itemNum == 1"
                    :class="itemNum == 1 ? 'itemTab' : ''"
                    style="
                      font-size: 35px;
                      height: 20%;
                      text-align: center;
                      ine-height: 20%;
                      line-height: 2;
                    "
                    @click="item(1)"
                  >
                    <span class="el-icon-refresh-left"></span>
                  </div>
                  <!-- 留言板 -->
                  <div
                    :class="itemNum == 3 ? 'itemTab' : ''"
                    style="
                      font-size: 35px;
                      height: 20%;
                      text-align: center;
                      ine-height: 20%;
                      line-height: 2;
                    "
                    @click="item(3)"
                  >
                    <span class="el-icon-view"></span>
                  </div>
                </div>
                <!-- 聊天列表 -->
                <div
                  v-if="itemNum == 1"
                  style="
                    width: 30%;
                    background: #e9e7e7;
                    margin-top: 10px;
                    height: 400px;
                    color: #000;
                  "
                >
                  <!-- 聊天列表 -->
                  <div v-if="newsUser.length == 0" style="line-height: 40px">
                    消息通知
                  </div>
                  <div v-for="(items, index) in newsUser" v-else :key="index">
                    <div style="line-height: 40px; background: #c7c6c6">
                      <div style="position: relative">
                        <span class="el-icon-user" style="margin-left: 10px">
                          {{ items.user }}
                        </span>
                        <span style="position: absolute; right: 10px">
                          {{ items.time }}
                        </span>
                        <br />
                        <span style="margin-left: 30px">{{ items.box }}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- 聊天记录 发送消息 -->
                <div
                  v-if="itemNum == 1"
                  style="
                    width: 45%;
                    background: #fff;
                    margin-top: 10px;
                    height: 400px;
                    color: #000;
                  "
                >
                  <!-- <div v-if="newsBox.length == 0" style="line-height: 40px">
                    暂无消息提醒
                  </div> -->

                  <div class="talk_con">
                    <div id="words" class="talk_show">
                      <div
                        v-for="(i, index) in newsBox"
                        :key="index"
                        :class="[i.user_type == 1 ? 'atalk' : 'btalk']"
                      >
                        <span v-if="i.msg_type == 'text'">{{ i.msg }}</span>
                        <span v-else>
                          <el-image
                            :preview-src-list="srcList"
                            :src="i.msg"
                            style="width: 100px; height: 100px"
                            @click="imge(i.msg)"
                          />
                        </span>
                      </div>
                    </div>
                    <div class="talk_input">
                      <el-popover
                        v-model="emojiShow"
                        height="700"
                        placement="bottom"
                        title="标题"
                        trigger="click"
                        width="500"
                      >
                        <el-button slot="reference">😀</el-button>
                        <div class="browBox">
                          <ul>
                            <li
                              v-for="(items, index) in faceList"
                              :key="index"
                              @click="getBrow(index)"
                            >
                              {{ items }}
                            </li>
                          </ul>
                        </div>
                      </el-popover>

                      <el-upload
                        action="https://devapi.jbkl.com/api/upload_img"
                        class="upload-demo submit-btn"
                        :on-error="uploadImgErr"
                        :on-success="uploadImgSuc"
                        :show-file-list="false"
                      >
                        <el-button
                          size="small"
                          style="width: 60px; height: 30px"
                          type="primary"
                        >
                          图片
                        </el-button>
                      </el-upload>
                      <el-button
                        class="submit-btn"
                        :disabled="form.msg == ''"
                        type="primary"
                        @click="sendMessage"
                      >
                        发送
                      </el-button>
                      <el-input
                        v-model="form.msg"
                        placeholder="请输入内容"
                        @keyup.enter.native="sendMessage"
                      />
                    </div>
                  </div>
                </div>
                <!-- 聊天话术 -->

                <div
                  v-if="itemNum == 1"
                  style="
                    width: 30%;
                    background: #e9e7e7;
                    margin-top: 10px;
                    height: 400px;
                    color: #000;
                    overflow: auto;
                  "
                >
                  <!-- text-align: center; -->
                  <div
                    style="
                      text-align: center;
                      margin-top: 10px;
                      border-bottom: 1px solid #c1b6b6;
                    "
                  >
                    话术列表
                  </div>
                  <div
                    style="
                      display: flex;
                      justify-content: space-around;
                      border: 1px solid #c1b6b6;
                    "
                  >
                    <p>个人话术</p>
                    <p>公共话术</p>
                    <p>刷新</p>
                  </div>
                  <el-collapse @change="handleChange">
                    <el-collapse-item name="1" title="一致性 Consistency">
                      <div>
                        与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
                      </div>
                      <div>
                        在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
                      </div>
                    </el-collapse-item>
                    <el-collapse-item name="2" title="反馈 Feedback">
                      <div>
                        控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
                      </div>
                      <div>
                        页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
                      </div>
                    </el-collapse-item>
                    <el-collapse-item name="3" title="效率 Efficiency">
                      <div>简化流程：设计简洁直观的操作流程；</div>
                      <div>
                        清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
                      </div>
                      <div>
                        帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
                      </div>
                    </el-collapse-item>
                    <el-collapse-item name="4" title="可控 Controllability">
                      <div>
                        用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
                      </div>
                      <div>
                        结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
                      </div>
                    </el-collapse-item>
                  </el-collapse>
                </div>
                <!-- 留言板 -->
                <div
                  v-if="itemNum == 3"
                  style="
                    background: #e9e7e7;
                    margin-top: 10px;
                    height: 400px;
                    color: #000;
                    text-align: center;
                    width: 90%;
                  "
                >
                  <div style="line-height: 40px">暂无留言板信息</div>
                </div>
              </div>
            </div>
            <div class="font-box"></div>
          </div>
        </div>
      </div>
    </section>
    <vab-footer />
  </div>
</template>

<script>
  const appData = require('@/assets/images/emojis.json')
  export default {
    name: 'VabAppMain',
    directives: {
      drag: function (el) {
        let dragBox = el //获取当前元素
        dragBox.onmousedown = (e) => {
          //算出鼠标相对元素的位置
          let disX = e.clientX - dragBox.offsetLeft
          let disY = e.clientY - dragBox.offsetTop
          document.onmousemove = (e) => {
            //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
            let left = e.clientX - disX
            let top = e.clientY - disY
            //移动当前元素
            dragBox.style.left = left + 'px'
            dragBox.style.top = top + 'px'
          }
          document.onmouseup = () => {
            //鼠标弹起来的时候不再移动
            document.onmousemove = null
            //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
            document.onmouseup = null
          }
        }
      },
      drags(el) {
        let oDiv = el // 当前元素
        // let self = this // 上下文
        // 禁止选择网页上的文字
        // document.onselectstart = function () {
        //   return false
        // }
        oDiv.onmousedown = function (e) {
          // 鼠标按下，计算当前元素距离可视区的距离
          let disX = e.clientX - oDiv.offsetLeft
          let disY = e.clientY - oDiv.offsetTop
          document.onmousemove = function (e) {
            // 通过事件委托，计算移动的距离
            let l = e.clientX - disX
            let t = e.clientY - disY
            // 移动当前元素
            oDiv.style.left = l + 'px'
            oDiv.style.top = t + 'px'
          }
          document.onmouseup = function () {
            document.onmousemove = null
            document.onmouseup = null
          }
          document.onmousemove = function (e) {
            // 鼠标位置-鼠标相对元素位置=元素位置
            let left = e.clientX - disX
            let top = e.clientY - disY
            // 限制拖拽范围不超出可视区
            if (left <= 0) {
              left = 5 // 设置成5,离边缘不要太近
            } else if (
              left >
              document.documentElement.clientWidth - el.clientWidth
            ) {
              // document.documentElement.clientWidth屏幕可视区宽度
              left = document.documentElement.clientWidth - el.clientWidth - 5
            }

            if (top <= 0) {
              top = 5
            } else if (
              top >
              document.documentElement.clientHeight - el.clientHeight
            ) {
              top = document.documentElement.clientHeight - el.clientHeight - 5
            }
            el.style.left = left + 'px'
            el.style.top = top + 'px'
          }

          return false //不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
          // return false
        }
      },
    },
    data() {
      return {
        text: '',
        isOpen: false,
        isMove: false,
        dialogVisible: false,
        show: '隐藏',
        showb: true,
        Chat: false,
        itemNum: 1,
        newsUser: [
          {
            user: '张三家庭组',
            time: '22:24:16',
            box: '你好',
          },
        ],
        newsBox: [],
        form: {
          msg: '',
          type: 'Q',
        },
        srcList: [],

        //表情框是否展示
        emojiShow: false,
        //表情列表
        faceList: [],
        //表情文本
        getBrowString: '',
      }
    },
    created() {
      // 初始化 表情
      this.loadEmojis()
      //连接GoEasy
      this.goEasy.connect({
        data: {},
      })
    },
    beforeMount() {
      let self = this

      //接收消息
      this.pubsub.subscribe({
        channel: 'mec_1_1_all',
        onMessage: function (message) {
          const box = JSON.parse(message.content)
          self.newsBox.push(box)
        },
        onSuccess: function () {},
        onFailed: function () {},
      })
    },
    // -

    // -

    methods: {
      // 话术
      handleChange() {},
      //加载表情，存放到表情列表中
      loadEmojis() {
        for (let i in appData) {
          this.faceList.push(appData[i].char)
        }
      },
      // 获取用户点击之后的标签 ，存放到输入框内
      getBrow(index) {
        for (let i in this.faceList) {
          if (index == i) {
            this.getBrowString = this.faceList[index]
            this.form.value += this.getBrowString
          }
        }
        this.emojiShow = false
      },
      // 聊天图片回显
      imge(e) {
        this.srcList = [e]
      },
      // 上传图片错误 回调
      uploadImgErr() {},
      // 上传图片正确 回调
      uploadImgSuc(res) {
        this.form.msg = res.data
        this.form.msg_type = 'image'
        let self = this
        if (this.form.msg.trim() !== '') {
          //发送消息
          this.pubsub.publish({
            channel: 'mec_1_1_all',
            message: JSON.stringify(self.form),
            onSuccess: function () {
              self.form.msg = ''
            },
          })
        }
      },

      sendMessage: function () {
        this.form.msg_type = 'text'
        //发送消息
        let self = this
        if (this.form.msg.trim() !== '') {
          //发送消息
          this.pubsub.publish({
            channel: 'mec_1_1_all',
            message: JSON.stringify(self.form),
            onSuccess: function () {
              self.form.msg = ''
              var ele = document.getElementsByClassName('talk_show')
              //判断元素是否出现了滚动条
              if (ele[0].scrollHeight > ele[0].clientHeight) {
                //设置滚动条到最底部
                ele[0].scrollTop = ele[0].scrollHeight
              }
            },
          })
        }
      },
      openBox() {
        this.dialogVisible = true
      },

      // 点击操作框（客服） 显示聊天
      customer() {
        this.Chat = true
      },
      // 隐藏聊天框
      showChat() {
        this.Chat = false
      },
      // 选择类型 ， 客服 ， 留言板
      item(e) {
        this.itemNum = e
      },
      // 显示隐藏操作按钮
      showflag() {
        if (this.show == '隐藏') {
          this.showb = false
          this.show = '显示'
        } else {
          this.showb = true
          this.show = '隐藏'
        }
      },
    },
  }
</script>

<style scoped>
  .talk_con {
    width: 100%;
    background: #f9f9f9;
  }

  .talk_show {
    height: 360px;
    background: #fff;
    margin: 10px auto 0;
    overflow: auto;
  }

  .talk_input {
    width: 100%;
    display: flex;
  }

  .whotalk {
    width: 80px;
    height: 30px;
    float: left;
    outline: none;
  }

  .talk_word {
    width: 420px;
    height: 26px;
    padding: 0px;
    float: left;
    margin-left: 10px;
    outline: none;
    text-indent: 10px;
  }

  .talk_sub {
    width: 56px;
    height: 30px;
    float: left;
    margin-left: 10px;
  }

  .atalk {
    margin: 10px;
  }

  .atalk span {
    display: inline-block;
    background: #0181cc;
    border-radius: 10px;
    color: #fff;
    padding: 5px 10px;
  }

  .btalk {
    margin: 10px;
    text-align: right;
  }

  .btalk span {
    display: inline-block;
    background: #ef8201;
    border-radius: 10px;
    color: #fff;
    padding: 5px 10px;
  }

  .box_a {
    background: #fff;
    width: 115px;
    border-radius: 13px;
    /* position: fixed; */
    /* bottom: 50%; */
    /* right: 0px; */
    padding-left: 15px;
    padding-top: 8px;
    padding-bottom: 8px;
    cursor: pointer;
    z-index: 888;
  }
  .box {
    width: 115px;
    /* position: fixed; */
    /* bottom: 57%; */
    /* right: 0px; */
    padding-left: 15px;
    padding-top: 8px;
    cursor: pointer;
    z-index: 888;
  }
  .box_m {
    width: 80%;
    height: 50px;
    border-radius: 4px;
    text-align: center;
    line-height: 25px;
    background: #1890ff;
    opacity: 0.6;
    color: #fff;
  }
  .box_m:hover {
    background: #1890ff;
    opacity: 0.7;
  }
  .button-box {
    width: 70%;
    border-radius: 50%;
    position: fixed;
    bottom: 25%;
    right: 10%;
    padding-left: 15px;
    padding-top: 8px;
    cursor: pointer;
    z-index: 888;
  }
  .btn-bg-img {
    width: 100%;
    height: 450px;
    /* background-image: url('https://devapi.jbkl.com/storage/20220302/2fUsHlXJcXzsJbtBCO1C8S8NPpNEqbgmBgSsIoEi.png'); */
    background: #5ba75a;
    background-size: cover;
    color: #fff;
  }
  .button-box:hover {
    color: white;
    opacity: 1;
  }

  .font-box {
    width: 80px;
    color: #3193ef;
    text-align: center;
  }
  .itemTab {
    color: #3193ef;
    background: #e9e7e7;
  }

  /* --- */

  ul {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
  }
  li {
    cursor: pointer;
    width: 10%;
    font-size: 26px;
    list-style: none;
    text-align: center;
  }
  .submit-btn {
    margin: 0 15px 10px 0;
    float: right;
  }
</style>
